<template>
  <div class="uav-detail f-r j-b">
    <div :class="['uav-detail-left', isCollapse ? 'isCollapse' : '']">
        <div class="collapse-item"  @click="changeCollapse">
          <el-icon color="#898F9D">
            <ArrowRight v-if="isCollapse"/>
            <ArrowLeft v-else/>
          </el-icon>
        </div>
        <el-scrollbar>
          <div class="uav-detail-left-content">
          <div class="post-box">
            <img src="@/assets/uav.png" alt="">
          </div>
          <div class="uav-tabs">
            <div :class="['uav-tab', activeTab === 'detail' ? 'active' : '']" @click="activeTab = 'detail'">
              <img v-if="activeTab === 'detail'" src="@/assets/icon_info_active.png" alt="">
              <img v-else src="@/assets/icon_info.png" alt="">
              基础信息
            </div>
            <div :class="['uav-tab', activeTab === 'nowDetail' ? 'active' : '']" @click="activeTab = 'nowDetail'">
              <img v-if="activeTab === 'nowDetail'" src="@/assets/icon_shishi_active.png" alt="">
              <img v-else src="@/assets/icon_shishi.png" alt="">
              实时信息
            </div>
          </div>
          <div class="description" v-show="activeTab === 'detail'">
            <el-row :gutter="6">
              <el-col :span="12" v-for="item in detailList" :key="item.name">
                <div class="description-item" >
                  <div class="description-item-title">{{ item.name }}</div>
                  <div class="description-item-content">{{ item.value || '/'}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="description" v-show="activeTab === 'nowDetail'">
            <div class="nowDetail-box f-r a-c">
              <divc class="nowDetail-item">
                <div class="f-r a-c">
                  <div class="nowDetail-item-value">12</div>
                  <div class="nowDetail-item-text">次</div>
                </div>
                <div class="nowDetail-item-text">飞行次数</div>
              </divc>
              <divc class="nowDetail-item">
                <div class="f-r a-c">
                  <div class="nowDetail-item-value">12</div>
                  <div class="nowDetail-item-text">h</div>
                </div>
                <div class="nowDetail-item-text">飞行时长</div>
              </divc>
              <divc class="nowDetail-item">
                <div class="f-r a-c">
                  <div class="nowDetail-item-value">12</div>
                  <div class="nowDetail-item-text">km</div>
                </div>
                <div class="nowDetail-item-text">飞行距离</div>
              </divc>
            </div>
            <el-row :gutter="6">
              <el-col :span="12" v-for="item in nowDetailList" :key="item.name">
                <div class="description-item" >
                  <div class="description-item-title">{{ item.name }}</div>
                  <div class="description-item-content">{{ item.value || '/'}}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="description-item" >
                  <div class="description-item-title">历史记录</div>
                  <div class="description-item-content">
                    <el-button type="text" color="#006FE9" :icon="isHide ? View : Hide" @click="isHide = !isHide">{{ isHide ? '查看' : '隐藏'}}</el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        </el-scrollbar>
      </div>
    <div :class="['uav-detail-right', isHide ? 'isHide' : '']">
      <div class="card">
        <div class="card-header">
          <div class="title">历史记录</div>
        </div>
        <div class="f-g f-c" style="overflow:hidden;">
          <div class="f-g">
            <el-table :data="recordList" height="100%" size="large">
              <el-table-column label="任务名称" prop="name" width="120"></el-table-column>
              <el-table-column label="无人机机型" prop="model" width="120"></el-table-column>
              <el-table-column label="航线名称" prop="line" width="120"></el-table-column>
              <el-table-column label="飞行策略" prop="metric" min-width="180"></el-table-column>
              <el-table-column label="任务状态" prop="status" width="100">
                <template #default="{ row }">
                  <div :class="['status f-r a-c', row.status]">{{ row.statusText }}</div>
                </template>
              </el-table-column>
              <el-table-column label="开始时间" prop="startTime" width="180"></el-table-column>
              <el-table-column label="结束时间" prop="endTime"  width="180"></el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <el-tooltip
                      effect="dark"
                      content="查看详情"
                      placement="top"
                  >
                    <el-button type="text" color="#006FE9" :icon="View" @click="openDetail(row)"></el-button>
                  </el-tooltip>
                  <el-tooltip
                      effect="dark"
                      content="查看图片"
                      placement="top"
                  >
                    <el-button type="text" color="#006FE9" :icon="Picture" @click="openPicture(row)"></el-button>
                  </el-tooltip>
                  <el-tooltip
                      effect="dark"
                      content="查看视频"
                      placement="top"
                  >
                    <el-button type="text" color="#006FE9" :icon="VideoCamera" @click="openVideo(row)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="gap"></div>
          <el-pagination
             class="f-r a-c f-e"
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              :page-sizes="[10, 50, 100, 200]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="changeSize"
              @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <img class="icon_map" v-if="isWei" src="@/assets/icon_map_active.png" alt="" @click="changeWei(false)">
    <img class="icon_map" v-else src="@/assets/icon_map.png" alt=""  @click="changeWei(true)">
    <div class="uav-detail-map" id="uavDetailMap"></div>
  </div>

  <el-dialog v-model="dialogDetail" width="600px" title="无人机详情">
    <div class="dialog-detail">
      <div class="title-box">
        <span>基础信息</span>
      </div>
      <div class="dialog-detail-box">
        <el-row :gutter="16">
          <el-col :span="12" v-for="item in detailList2">
            <div class="f-r a-c detail-item">
              <span class="detail-label">{{ item.label }}</span>
              <span :class="['detail-value f-r a-c', item.status]" class="detail-value">
                  {{ item.value }}
                </span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="title-box">
        <span>任务日志</span>
      </div>
      <div class="progress-line-box">
        <div class="progress-line"></div>
        <div class="progress-list">
          <div class="progress-item" v-for="item in lineList" :key="item.id">
            <div class="progress-item-title">{{ item.title }}</div>
            <div class="progress-item-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogPicture" width="800px" title="图片列表">
    <div class="dialog-picture">
      <el-row :gutter="12">
        <el-col :span="6" v-for="item in pictureList" :key="item.id">
          <div class="picture-item">
            <el-image :src="item.url"></el-image>
          </div>
        </el-col>
      </el-row>

      <div style="padding: 20px 0 0 0">
        <el-pagination
            class="f-r a-c j-c"
            v-model:current-page="pageNo2"
            v-model:page-size="pageSize2"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
            @size-change="changeSize2"
            @current-change="changePage2"
        />
      </div>
    </div>
  </el-dialog>
  <el-dialog v-model="dialogVideo" width="800px" title="视频播放">
    <div class="dialog-picture">
      <video style="width: 100%;height: 500px"/>
    </div>
  </el-dialog>
</template>
<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {ArrowRight, ArrowLeft, View, Picture, VideoCamera, Hide, Plus, Search} from "@element-plus/icons-vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
const isCollapse = ref(false)
const changeCollapse = () => {
  isCollapse.value = !isCollapse.value
}
const isHide = ref(true)
const activeTab = ref('detail')
const detailList = ref([
  {
    name: '无人机名称',
    value: 'MavicAir2'
  },
  {
    name: '无人机型号',
    value: 'M30T'
  },
  {
    name: '无人机编号',
    value: '1ZNBKCG00C00C8'
  },
  {
    name: '左侧挂载',
    value: ''
  },
  {
    name: '右侧挂载',
    value: ''
  },
  {
    name: '顶部挂载',
    value: ''
  },
  {
    name: '购买日期',
    value: '2020-03-20'
  },
  {
    name: '使用日期',
    value: '2020-03-20'
  },
  {
    name: '备注',
    value: '这是一行备注'
  },
])
const nowDetailList = ref([
  {
    name: 'GPS 信号',
    value: 'MavicAir2'
  },
  {
    name: 'GPS 星数',
    value: '0'
  },
  {
    name: '档位',
    value: 'P'
  },
  {
    name: '海拔高度',
    value: '0 m'
  },
  {
    name: '风速',
    value: '0 m/s'
  },
  {
    name: '风向',
    value: '/'
  },
  {
    name: '水平速度',
    value: '0 m/s'
  },
  {
    name: '垂直速度',
    value: '0 m/s'
  },
  {
    name: '电池电量',
    value: '0 %'
  },
  {
    name: '偏航角',
    value: '0°'
  }
])
const recordList = ref([
  {
    name: '项目1',
    model: '无人机1',
    line: '航线1',
    metric: '飞行策略1',
    location: '站点1',
    status: 'normal', // 'error
    statusText: '成功',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目2',
    model: '无人机2',
    line: '航线2',
    metric: '飞行策略2',
    location: '站点2',
    status: 'normal', // 'error
    statusText: '成功',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目3',
    model: '无人机3',
    line: '航线3',
    metric: '飞行策略3',
    location: '站点3',
    status: 'normal', // 'error
    statusText: '成功',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目4',
    model: '无人机4',
    line: '航线4',
    metric: '飞行策略4',
    location: '站点4',
    status: 'normal', // 'error
    statusText: '成功',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
  {
    name: '项目5',
    model: '无人机5',
    line: '航线5',
    metric: '飞行策略5',
    location: '站点5',
    status: 'error', // 'error
    statusText: '失败',
    startTime: '2021-08-01 12:00:00',
    endTime: '2021-08-01 12:00:00'
  },
])

const search = () => {
}
const pageNo = ref(1)
const pageSize = ref(10)
const total = ref(0)
const changePage = (val) => {
  pageNo.value = val
  search()
}
const changeSize = (val) => {
  pageSize.value = val
  search()
}

/**
 * 地图
 */
let map = null;

onMounted(() => {
  AMapLoader.load({
    key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
      .then((AMap) => {
        map = new AMap.Map("uavDetailMap", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          layers: [new AMap.TileLayer.Satellite()],
          zoom: 14, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      })
      .catch((e) => {
        console.log(e);
      });
});

// 是否卫星地图
const isWei = ref(true)
const changeWei = (val) => {
  isWei.value = val
  if (val) {
    map.setLayers([new AMap.TileLayer.Satellite()])
  } else {
    map.setLayers([new AMap.TileLayer()])
  }
}

onUnmounted(() => {
  map?.destroy();
});

/**
 * 无人机记录操作
 */

const dialogDetail = ref(false)
const dialogPicture = ref(false)
const dialogVideo = ref(false)
const rowItem = ref({})
const detailList2 = ref([
  {
    label: '任务名称',
    value: '05101550',
  },
  {
    label: '策略名称',
    value: '05101549',
  },
  {
    label: '无人机名称',
    value: '跃飞',
  },
  {
    label: '飞行距离',
    value: '100 m',
  },
  {
    label: '开始时间',
    value: '2024-05-10 15:51:21',
  },
  {
    label: '飞行时长',
    value: '00:01:21',
  },
  {
    label: '结束时间',
    value: '2024-05-10 15:51:21',
  },
  {
    label: '任务状态',
    value: '成功',
    status: 'normal'
  },
  {
    label: '机场选择',
    value: '00:01:21',
  },
  {
    label: '失败原因',
    value: '-',
  }
])
const lineList = ref([
  {
    id: 1,
    title: '任务开始',
    content: '2024-05-10 15:51:21'
  },
  {
    id: 2,
    title: '飞行中',
    content: '2024-05-10 15:51:21'
  },
  {
    id: 3,
    title: '任务结束',
    content: '2024-05-10 15:51:21'
  }
])
const pictureList = ref([
  {
    id: 1,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 2,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 3,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 4,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 1,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 2,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 3,
    url: require('@/assets/other/default_img.png')
  },
  {
    id: 4,
    url: require('@/assets/other/default_img.png')
  },
])

const pageNo2 = ref(1)
const pageSize2 = ref(10)
const total2 = ref(0)
const changePage2 = (val) => {
  pageNo.value = val
  search()
}
const changeSize2 = (val) => {
  pageSize.value = val
}
const openDetail = (row) => {
  rowItem.value = row
  dialogDetail.value = true
}
const openPicture = (row) => {
  rowItem.value = row
  dialogPicture.value = true
}
const openVideo = (row) => {
  rowItem.value = row
  dialogVideo.value = true
}
</script>

<style lang="scss">
.dialog-picture {
  .picture-item {
    width: 100%;
    height: 180px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
.dialog-detail {
  .title-box {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    margin-bottom: 16px;
    color: #1A1A1A;
  }
  .dialog-detail-box {
    background-color: #F7F8FB;
    padding: 16px;
    margin-bottom: 24px;
    .detail-item {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      line-height: 36px;
      .detail-label {
        color: #898F9D;
      }
      .detail-value {
        color: #1C2435;
        margin-left: 8px;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        height: 20px;

        &.error::before {
          background-color: #FF4D4F;
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;
        }
        &.normal::before {
          background-color: #48E07C;
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;
        }
      }
    }
  }
  .progress-line-box {
    position: relative;
    padding-left: 36px;
    .progress-line {
      width: 2px;
      height: 100%;
      background-image: url("~@/assets/icon_line.png");
      background-repeat: repeat-y;
      position: absolute;
      left: 36px;
      top: 0;
    }
    .progress-list {
      .progress-item {
        padding-left: 16px;
        position: relative;
        margin-bottom: 16px;
        &::before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #D9D9D9;
          position: absolute;
          left: -3px;
          top: 0;
        }
        .progress-item-title {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 500;
          line-height: 14px;
          text-align: left;
          color: #1C2435;
          padding-bottom: 6px;
        }
        .progress-item-content {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 500;
          line-height: 19.6px;
          text-align: left;
          color: #898F9D;
        }
      }
    }
  }
}
.uav-detail {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  position: relative;
  .el-scrollbar {
    padding: 20px;
    .el-scrollbar__bar.is-horizontal  {
      display: none !important;
    }
  }
  .uav-detail-map {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .icon_map {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 3;
  }
  .uav-detail-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 2;
    background-color: #FFFFFF;
    width: 384px;
    padding: 16px;
    box-shadow: 6px 0px 6px 0px #D5D5D54D;
    transition: width 0.3s;
    &.isCollapse {
      width: 0;
      padding: 0;
      .uav-detail-left-content {
        display: none;
      }
    }
    .collapse-item {
      position: absolute;
      top: 50%;
      right: -24px;
      transform: translateY(-50%);
      width: 24px;
      height: 65px;
      background-color: #FFFFFF;
      border-radius: 0 5px 5px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 6px 0px 6px 0px #D5D5D54D;
      z-index: 3;
    }
    .post-box {
      height: 153px;
      margin-bottom: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .uav-tabs {
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      .uav-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid #FFFFFF;
        font-size: 14px;
        color: #898F9D;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
        &.active {
          color: #006FE9;
          border-bottom-color: #006FE9;
        }
      }
    }
  }
  .description{
    padding-top: 24px;
    .nowDetail-box {
      padding: 20px 0;
      background-color: #F7F8FB;
      height: 92px;
      margin-bottom: 24px;
      .nowDetail-item {
        border-right: 2px solid #C8CDD8;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding-left: 16px;
        height: 100%;
        &:last-of-type {
          border-right: none;
        }
        .nowDetail-item-text {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 400;
          line-height: 19.6px;
          text-align: left;
          color: #898F9D;
        }
        .nowDetail-item-value {
          font-family: DIN;
          font-size: 16px;
          font-weight: 700;
          line-height: 19.54px;
          text-align: left;
          margin-right: 20px;
          color: #1C2435;
        }
      }
    }
    .description-item {
      margin-bottom: 24px;
      .description-item-title {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: #898F9D;
        margin-bottom: 8px;
      }
      .description-item-content {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
        text-align: left;
        color: #1C2435;
      }
    }
  }
  .uav-detail-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    transition: width 0.3s;
    z-index: 2;
    &.isHide {
      width: 0;
      padding: 0;
    }
  }
  .card {
    height: 100%;
    padding: 24px;
    border-radius: 4px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .card-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ECECEC;
      padding-bottom: 24px;
      .title {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.6px;
        text-align: left;
        color: #1C2435;
      }
      .more {
        cursor: pointer;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 19.6px;
        text-align: left;
        color: #898F9D;
      }
    }
  }
  .status {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    height: 20px;
    &::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
    }
    &.error::before {
      background-color: #FF4D4F;
    }
    &.normal::before {
      background-color: #48E07C
    }
  }
}
</style>
